<template>
  <div class="footer">
    <div v-html="footerText" class="ql-editor"></div>
  </div>
</template>
<script setup>
import { getFooter } from "@/api/home/home";
const footerText = ref("");
function getList() {
  getFooter().then((res) => {
    footerText.value = res.data.title;
  });
}
onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.footer {
  height: 150px;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #ffffff;
  background: url("@/assets/home/bottom.jpg");
  background-size: cover;

  // margin-top: 50px;
  span {
    padding: 10px 0;
  }
}
</style>
<style lang="scss">
.footer {
  div {
    p {
      margin: 5px 0 !important;
    }
  }
}

@media (max-height: 800px) {
  .footer {
    height: 80px;
  }

  // .ql-editor {
  //   padding: 4px 15px;
  //   font-size: 12px;
  // }
}
</style>